website·Indexed 30 days ago
https://chofu-programming.netlify.app/docsEducational materials from the Chofu Boys and Girls Invention Club Programming Classroom. The documentation provides tutorials on using micro:bit and chibi:bit with the MakeCode editor, as well as guides for p5.js and setting up React environments with Vite and D3.js.
There are two primary editors available for programming the micro:bit (and compatible devices like chibi:bit):
Important Caveat: While MakeCode also allows writing Python code, the syntax and implementation differ from the dedicated Python Editor. Ensure you use the correct editor for your specific project requirements.
// Use the 'pick random 0 to 10' block
// and pass it to the 'show number' block// src/LinePlot.jsx
import * as d3 from "d3";
export default function LinePlot({
data,
width = 640,
height = 400,
marginTop = 20,
marginRight = 20,
marginBottom = 20,
marginLeft = 20,
}) {
const x = d3.scaleLinear(
[0, data.length - 1],
[marginLeft, width - marginRight],
);
const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
const line = d3.line((d, i) => x(i), y);
return (
<svg width={width} height={height}>
<path
fill="none"
stroke="currentColor"
strokeWidth="1.5"
d={line(data)}
/>
<g fill="white" stroke="currentColor" strokeWidth="1.5">
{data.map((d, i) => (
<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />
))}
</g>
</svg>
);
}// src/App.jsx import * as d3 from "d3"; import { useState } from "react"; import LinePlot from "./LinePlot";
export default function App() { const [data, setData] = useState(() => d3.ticks(-2, 2, 200).map(Math.sin));
function onMouseMove(event) { const [x, y] = d3.pointer(event); setData(data.slice(-200).concat(Math.atan2(x, y))); }
return ( <div onMouseMove={onMouseMove}> <LinePlot data={data} /> </div> ); }
# Create a new React project using the react template
npm create vite@latest my-d3-app -- --template react
# Navigate into the project directory
cd my-d3-app
# Install dependencies
npm install
# Start the development server
npm run dev