Benoit Estrade

@estradeb·6 public vizzes

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It plots temperature in degrees Celsius against time, with a smooth curved line generated using `d3.line` with `curveBasis`. The chart includes labeled axes and a title, rendered as an SVG. The code uses d3 v5 functions including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `extent`, with data loaded via `csv` and parsed into dates and numeric temperatures.

Feb 21, 2021

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays temperature readings over the course of a week from the Data Canvas Sense Your City dataset. The visualization uses a smooth, naturally curved line rendered as an SVG path via d3.line with curveNatural. React components structure the chart, with d3.scaleTime and d3.scaleLinear handling the x- and y-axis scales respectively, while custom AxisBottom and AxisLeft components render the gridlines and tick labels. The dataset is loaded asynchronously using d3.csv from a GitHub gist.

Feb 20, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js v6 starter template that loads JSON event data and renders it as static rectangles. The visualization shows four entries from a local `evenement.json` file, each mapped to a fixed-size `<rect>` element in an SVG container, though no data-driven scaling or positioning is implemented. The code uses D3’s `select`, `json`, and `scaleLinear` APIs to fetch the data and append shapes, with the SVG dimensions read directly from the markup. The rendering approach is basic, serving as a foundational scaffold for further development rather than a finished interactive chart.

Feb 19, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a static smiley face in SVG and animating its eyebrows. The face is built from primitive shapes—circles for the eyes, rectangles for the eyebrows and hair, and a path generated with the `arc()` function for the mouth—all positioned within a centered `<g>` element. Using `transition.attr`, the eyebrows move upward and then return to their original position over repeated two-second intervals. The code relies on `d3.select`, `d3.arc`, and chained transitions to create the looped motion.

Feb 16, 2021

Loading thumbnail…

Fork of HTML Starter

This example presents a static HTML page that displays the text “Hello HTML” at a very large font size. The page uses inline CSS to center the text and set its font size to 13em. It also runs a small JavaScript snippet that logs “Hello JavaScript!” to the browser’s developer console. The project includes an `evenement.json` file with event data, but the main page does not currently render or visualize this data, serving instead as a minimal starting point for building a React-based visualization.

Feb 16, 2021

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how to use a `package.json` file in VizHub to declare dependencies and custom library mappings, rendering a React component that displays the text "Hello" alongside a preformatted JSON block. The code imports `React` and `ReactDOM` directly, relying on the `vizhub.libraries` field to resolve these packages to browser globals via CDN paths. It also uses `d3` for selection, and the `license` field specifies an ISC license. The visualization serves as a minimal test of package management and embed features.

Feb 16, 2021